<template>
    <div>
        <el-form :ref="($event) => setRef($event)" :model="ddata" label-width="auto" class="q-form flex wrap"
            :class="['q-form-' + name, 'q-form-' + name.slice(-4), `flex-${flex}-start`, refName]">

            <vue-draggable v-model="TemList" :animation="150" :group="{
                name: 'TemList',
                pull: false,
                put: true
            }" class="cx_right_temList">

                <div style="text-align: center;margin: 30px;" v-if="TemList && TemList.length == 0">
                    💕 请从左侧组件库拖拽表单组件到此处</div>
                <div v-for="(i, n) in TemList" @click.stop="clickTemList(i, n)" :key="n" :class="[i.class, i.prop,]"
                    class="temItem" :style="i.hidden && { display: 'none', margin: 0 }">
                    <h4 v-if="i.els && i.label" :class="!i.hidden && 'm-required'">{{ i.label }}</h4>
                    <slot :name="i.slot" :pItem="i" v-if="!i.hidden">
                        <div class="flex has-els" v-if="i.els" :class="[i.prop, i.class,
                        activeTem.prop === i.prop ? 'activeTtem' : ''
                        ]">
                            <div :class="activeTem.idx === n ? 'activeTtem' : ''">
                                <el-form-item v-for="(el, elIndex) in i.els" :key="elIndex"
                                    :class="[el.class, el.prop, el.prop + '_' + el.el]"
                                    :label="el.label && !['h2', 'h3'].includes(el.el) ? el.label : ''" :prop="el.prop"
                                    :rules="getRules(el)" :style="el.hidden && { display: 'none', margin: 0 }">
                                    <slot :name="el.slot" :sItem="el" v-if="!el.hidden">
                                        <elsContainer :el="el" :isView="isView" :data="ddata" @change="change"
                                            @point-handle="$emit('point-handle', $event)"
                                            :style="{ width: props.elWidth }" />
                                    </slot>
                                </el-form-item>
                            </div>
                            <div class="del-tem" @click.stop="delIemList(i, n)"
                                :class="activeTem.idx === n ? '' : 'blockDel-tem'">
                                <el-icon :size="20">
                                    <Delete />
                                </el-icon>
                            </div>
                        </div>
                        <div v-else class="no-els" :class="i.prop + '_' + i.el">
                            <div :class="activeTem.idx === n ? 'activeTtem' : ''">
                                <el-form-item :label="i.label && !['h2', 'h3'].includes(i.el) ? i.label : ''"
                                    :class="[i.class, i.prop]" :prop="i.prop" :rules="getRules(i)"
                                    :style="i.hidden && { display: 'none', margin: 0, width: '200px' }">
                                    <elsContainer :el="i" :isView="isView" :data="ddata" :elWidth="props.elWidth"
                                        @change="change" @point-handle="$emit('point-handle', $event)" />
                                </el-form-item>
                            </div>

                            <div class="del-tem" @click.stop="delIemList(i, n)"
                                :class="activeTem.idx === n ? '' : 'blockDel-tem'">
                                <el-icon :size="20">
                                    <Delete />
                                </el-icon>
                            </div>
                        </div>
                    </slot>
                    <slot name="item-handle" :pItem="i"></slot>
                </div>
            </vue-draggable>
        </el-form>
    </div>
</template>
<script>
export default {
    name: "q-form"
};
</script>
<script setup>
import { sendEmitter, putEmitter } from '@/utils/events'
import { defineProps, ref, defineEmits } from "vue";
import elsContainer from "./els.vue";
import { VueDraggable } from 'vue-draggable-plus'

const emits = defineEmits([
    "cancel",
    "confirm",
    "change",
    "check",
]);
const props = defineProps({
    sureText: {
        type: String,
        default: "确 定"
    },
    cancelText: {
        type: String,
        default: "取 消"
    },
    showSure: {
        type: Boolean,
        default: true
    },
    showCancel: {
        type: Boolean,
        default: true
    },
    showClear: {
        type: Boolean,
        default: false
    },
    refName: {
        type: String,
        default: "FormRef"
    },
    ddata: {
        type: Object,
        default: () => { }
    },
    form: {
        type: Array,
        default: () => []
    },
    name: {
        type: String,
        default: ""
    },
    flex: {
        type: String,
        default: "col"
    },
    isView: {
        type: Boolean,
        default: false
    },
    elWidth: {
        type: String,
        default: "250px"
    },
});
const TemList = ref([]);
const FormRef = ref();
const activeTem = ref({});
watch(TemList, (newOld, valOld) => {
    if (newOld !== valOld) {
        console.log(newOld);
    }
})
const flowDigFormRef = ref();
const setRef = e => {
    let { refName } = props;
    switch (refName) {
        case "FormRef":
            FormRef.value = e;
            break;
        case "flowDigFormRef":
            flowDigFormRef.value = e;
            break;
    }
};

const getRules = e => {
    let { el, hidden, els, required, label, place } = e;
    let message = `请${el && el.includes("input") || el.includes("text-area") ? "输入" : "选择"}${label ||
        place ||
        "内容"}`;
    let nowrequired;
    if (required == undefined) {
        nowrequired =
            hidden == undefined
                ? ["true", "1"].includes(
                    `${required == undefined ? !(el == "p" || hidden || els) : required
                    }`
                )
                : !hidden;
    } else {
        nowrequired = required;
    }
    return [
        {
            required: nowrequired,
            message,
            trigger: ["blur", "change"]
        }
    ];
};

// change变化
const change = e => {
    // console.log(e, '单个数据')
}
// 选中发送
const clickTemList = (e, n) => {
    e.idx = n;
    activeTem.value = e;
    sendEmitter.emit('sendEmitter', e)
}
// 选中删除
const delIemList = (e, n) => {
    TemList.value.splice(n, 1)
    clickTemList({}, null)
}

// 选中接受
putEmitter.on('putEmitter', (val) => {
    TemList.value[val.idx] = val;
})


// 提交表单
const onCheck = () => {
    let fn = emits('confirm')
    let formRef = FormRef.value
    if (!formRef) return;
    formRef.validate((valid) => {
        if (valid) {
            console.log("submit!");
            fn && fn();
        } else {
            console.error("error submit!");
            return false;
        }
    });
};


// 暴露变量
defineExpose({
    onCheck,
});
</script>
<style scoped lang="scss">
.condition {
    min-width: 100%;
}

.tip {
    p {
        color: #f00;
        font-size: 10px;
        transform: scale(0.9);
        position: absolute;
        margin-left: 68px !important;
        margin-top: 5px;
    }
}

.flex-col-start {
    >div {
        width: 100%;
    }
}

.el-form {
    padding-bottom: 10px;

    >div {
        ::v-deep .el-form-item {
            width: 100%;

            .el-form-item__content {
                >div {
                    >p {
                        margin-left: 20px;
                    }
                }
            }
        }
    }

    .handle {
        width: 100% !important;
    }

    >div {
        // flex: 0 0 50%;
        flex: 0 0 100%;
        // margin-top: 10px;
        align-items: center;

        // background: #f00;
        >h4 {
            margin-bottom: 10px;
            font-size: 15px;

            >i {
                color: #f00;
                margin-right: 4px;
            }
        }

        >div {
            .el-form-item {
                margin-bottom: 15px;

                >div {
                    >div {}
                }

                ::v-deep .el-form-item__error {
                    // top: 105%;
                    left: 10px;
                }
            }
        }
    }

    >.handle {
        flex: 0 0 100% !important;
        text-align: right;
    }
}

.q-form {
    height: 100%;
    padding: 0 !important;
}

.temItem {
    padding: 3px 0;
    margin-bottom: 5px;
}

.activeTtem {
    border: 1px dashed #ccc;
    flex: 1;
    align-items: center;
}

.cx_right_temList {
    height: 100%;
    overflow-y: scroll;
}

.del-tem {
    margin: 0 5px 0 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.blockDel-tem {
    display: none;
}

.has-els,
.no-els {
    display: flex;
}
</style>